<template>
  <div id="new-law-list"
    v-loading="loading"
    element-loading-text="加载中..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(255, 255, 255, 0.7)"
  >
    <div slot="first" class="first">新法速递</div>
    <b-layout
      space="110px"
      :border="false"
    >
      <div class="top" slot="first">
        <new-law-filter
          @paramsChange="searchHandle"
        />
      </div>
      <b-layout
        space="85px"
        slot="last"
        placement="bottom"
        :border="false"
        class="surplus"
      >
        <div class="center" slot="first">
          <el-table
            :data="tableData"
            height="100%"
            :cell-style="cellStyle"
            style="width: 100%">
            <el-table-column
              label="标题"
              prop="title"
              width="410px"
            >
              <template slot-scope="scope">
                <div class="title" @click="clickHandle(scope.row.id)" v-hightlight:[scope.row.title]="searchParams.keywords"></div>
              </template>
            </el-table-column>
            <el-table-column
              v-for="(item, index) of columns"
              :key="index"
              :label="item.label"
              :prop="item.prop"
            >
              <template slot-scope="scope">
                <div v-if="item.label === '时效性'">{{scope.row.law_status === 1 ? '有效' : '无效'}}</div>
                <div v-else>{{scope.row[item.prop] || '--'}}</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="bottom" slot="last">
          <custom-paginator
            ref="paginator"
            :total="total"
            @pageChange="pageChangeHandle"
          />
        </div>
      </b-layout>
    </b-layout>
  </div>
</template>

<script>
import newLawFilter from '../cps/new-law-filter'
import customPaginator from '@/components/public/CustomPaginator'
import bLayout from '@/layouts/BinaryLayout'
export default {
  name: 'new-law-express-list',
  components: {
    newLawFilter,
    customPaginator,
    bLayout
  },
  data () {
    return {
      columns: [
        { prop: 'org', label: '发布部门' },
        { prop: 'file_order', label: '发文字号' },
        { prop: 'law_status', label: '时效性' },
        { prop: 'publish_date', label: '发布日期' }
      ],
      loading: false,
      tableData: [],
      total: 0,
      searchParams: {
        keywords: '',
        search_type: 1,
        sort_type: 2,
        start_time: '',
        end_time: '',
        page: 1,
        page_size: 10
      }
    }
  },
  mounted () {
    // this.getList(this.searchParams)
  },
  methods: {
    searchHandle (e) {
      let date = e.date || []
      this.searchParams.keywords = e.input || ''
      this.searchParams.start_time = date[0]
      this.searchParams.end_time = date[1]
      this.searchParams.search_type = e.radio
      this.searchParams.page = 1
      this.getList(this.searchParams)
    },
    clickHandle (id) {
      this.$router.push({
        name: 'new-law-express-detail', params: { id: id }
      })
    },
    getList (params) {
      this.loading = true
      this.$api.newLaw(params).then(res => {
        this.loading = false
        this.total = res.data.total
        this.tableData = res.data.data
        let paginator = this.$refs.paginator
        if (paginator) {
          paginator.updateTotal(res.data.total)
          paginator.updatePage(this.searchParams.page_size, this.searchParams.page)
        }
      }).catch(err => {
        this.loading = false
        console.error(err)
        this.$msgMnger.httpError(err)
      })
    },
    pageChangeHandle (e) {
      this.searchParams.page = e.page
      this.searchParams.page_size = e.pagesize
      this.getList(this.searchParams)
    },
    cellStyle ({ row, column, rowIndex, columnIndex }) {
      return 'padding:15px 0;'
    }
  }
}
</script>

<style scoped lang="scss">

#new-law-list{
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  .first{
    margin-bottom: 15px;
    color: $sedondary-text-color;
    font-size: $fs-m;
  }
  .top{
    background: $box-title-bg-color;
    padding: 32px;
  }
  .center{
    height: 100%;
    .title{
      color: $primary-color;
      cursor: pointer;
    }
  }
  .bottom{
    height: 100%;
    overflow: hidden;
    background: $box-bg-color;
  }
}
</style>
